/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:16px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}

img{
    width:100%;
    display:block;
}
html{
    min-height: 100%;
}
body{
    position: relative;
    min-height: 100%;
}

/* 通用样式 */
.h2{
    color:#fe4b60;
    font-size:20px;
    line-height: 1.5;
}
.text-mute{
    font-size:14px;
    color:#999;
}
.show{
    display:block!important;
}
.hide{
    display:none!important;
}


.wrapper{
    width:100%;
    height:100%;
    position:fixed;
    background:url(../images/bg.jpg) 0 0 no-repeat;
    background-size: 100% 100%;
}
.link-rule,
.link-prize{
    position:absolute;
    top:6px;
    width:23%;
}
.link-rule{
    left:7px;
}
.link-prize{
    right:7px;
}


/* logo */
.logo{
    position: absolute;
    top:6%;
    margin: 0 16%;
    width:68%;
    z-index: 10;
}

/* sum rest */
.sum-rest{
    position: absolute;
    top:24%;
    margin:auto 28%;
    width:44%;
    min-width: 165px;
    height:auto;
}
.sum-rest .sum-rest-info{
    position: absolute;
    right: 0;
    top:50%;
    width:60%;
    text-align: center;
    font-size:15px;
    display:block;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
}

/* clock */
.clock{
    position: absolute;
    top:50%;
    left:50%;
    margin:-10px auto;
    width:68%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
@media screen and (min-device-aspect-ratio:14/25){
    .logo{
        margin: 0 20%;
        width:60%;
    }
    .sum-rest{
        width:40%;
    }
    .clock{
        width:60%;
    }
}
.clock .clock-h,
.clock .clock-m,
.clock .clock-s,
.clock .clock-p{
    width:50%;
    position:absolute;
    top:30%;
    left:25%;
}
.clock .clock-h{
    -webkit-transform: rotate(225deg);
    transform:rotate(225deg);
}
.animation .clock-h{
    -webkit-animation:myTimerH 0.3s linear 0s infinite normal;
    animation:myTimerH 0.3s linear 0s infinite normal;
}
.clock .clock-m{
    width:54%;
    top:28%;
    left:23%;
}
.animation .clock-m{
    -webkit-animation:myTimerM 0.3s linear 0s infinite normal;
    animation:myTimerM 0.3s linear 0s infinite normal;
}
 .clock .clock-s{
   -webkit-transform: rotate(113deg);
    transform:rotate(113deg);
}
.animation .clock-s{
    -webkit-animation:myTimerS 0.3s linear 0s infinite normal;
    animation:myTimerS 0.3s linear 0s infinite normal;
}
/* 时针动画 */
@-webkit-keyframes myTimerH
{
    0% {
        -webkit-transform: rotate(225deg);
        transform:rotate(225deg);
    }
    100%{
        -webkit-transform:rotate(585deg);
        transform:rotate(585deg);
    }
}
@keyframes myTimerH
{
    0% {
        -webkit-transform: rotate(225deg);
        transform:rotate(225deg);
    }
    100%{
        -webkit-transform:rotate(585deg);
        transform:rotate(585deg);
    }
}
/* 分针动画 */
@-webkit-keyframes myTimerM
{
    0% {
        -webkit-transform: rotate(0deg);
        transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
@keyframes myTimerM
{
    0% {
        -webkit-transform: rotate(0deg);
        transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
/* 秒针动画 */
@-webkit-keyframes myTimerS
{
    0% {
        -webkit-transform: rotate(113deg);
        transform:rotate(113deg);
    }
    100%{
        -webkit-transform:rotate(473deg);
        transform:rotate(473deg);
    }
}
@keyframes myTimerS
 {
     0% {
         -webkit-transform: rotate(113deg);
         transform:rotate(113deg);
     }
     100%{
         -webkit-transform:rotate(473deg);
         transform:rotate(473deg);
     }
 }
.clock .clock-p{
    width:52%;
    top:30%;
    left:24%;
    -webkit-transform: translateY(-1px);;
    transform: translateY(-1px);
}


/* challenge rest */
.challenge-rest{
    position: absolute;
    bottom:26%;
    width: 100%;
    text-align: center;
    color:#fff;
}
.challenge-rest .challenge-rest-info{
    font-size:22px;
    color: #fefe00;
    font-weight: bold;
}

/* 按钮 */
.btns{
    position: absolute;
    bottom:6%;
    margin:18px 28%;
    width:44%;
}
.btns>img{
    display:none;
}

/* 种树链接 */
.link-more,
.link-share{
    position:absolute;
    width:16%;
}
.link-more{
    left:8px;
    bottom:109px;
}
.link-share{
    right:8px;
    bottom:14px;
}

/* 弹出框 */
.backpop {
    position: fixed;
    z-index: 998;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.7);
    display:block;
}

/* 活动规则 */
.rule-container{
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display:none;
}
.pop-rule{
    position: absolute;
    top:15%;
    margin:0 5%;
    padding-bottom:5%;
    width: 90%;
    height: 80%;
    box-sizing: border-box;
    background:#fff;
    border:3px solid #ff6a46;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.close-btn{
    position:absolute;
    top:20px;
    right:20px;
    width:20px;
}
.pop-rule .pop-logo{
    position:absolute;
    top:-60px;
    margin:0 14%;
    width:72%;
}
.rule-header{
    margin:0 20%;
    padding-top:40px;
    width:60%;
}
.rule-content{
    padding:0 8%;
    width: 84%;
    height:80%;
    line-height: 1.5;
    overflow: auto;
}
.rule-title{
    color:#ff6743;
}

/* 引导页 */
.help-page{
    position:fixed;
    z-index: 1000;
    top:0;
    width:100%;
    height:100%;
    color:#fff;

}
.help-infos{
    position:absolute;
    bottom:25%;
    left:50%;
    width:88%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
}
.help-detail{
    width:230px;
    padding-bottom:10px;
    text-align: center;
}
.help-detail>span{
    display:none;
}
.hellp-arrow{
    float:left;
    padding-left:30%;
    width:30px;
}
.help-next{
    margin-right:10px;
    float:right;
    width:80px;
}
.help-next>img{
    display:none;
}
.help-know{
    width: auto;
    height:35.5px;
}
.help-page .btns{
    /*position:absolute;
    top:498px;
    left:50%;
*/
    -webkit-transform: translate(-8px,0);
    transform: translate(-8px,0);
    padding:7px 8px 2px;
    background:url(../images/help-border.png) 0 0 no-repeat;
    background-size: 100% 100%;
    box-sizing: content-box;
}

/* 挑战提示 */
.pop-notice{
    position:fixed;
    top:20%;
    margin:0 15%;
    width:70%;
    z-index: 1000;
    display:none;
}
.pop-notice .notice-contianer{
    position: absolute;
    top:64%;
    width:100%;
    text-align: center;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
}
.pop-notice .success-note{
    display:none;
}
.pop-notice .notice-contianer .h2{
    padding-bottom:12px;
}
.pop-notice .notice-contianer .text-mute{
    padding-top:5px;
}
.pop-notice .notice-contianer .h3{
    line-height: 38px;
}
.pop-btn{
    margin:0 33%;
    padding-top:12px;
    width:34%;
}
.fail-btn{
    padding-top:0;
}
.text-normal{
    line-height:20px;
}

/* 我的奖品 */
.prize-wrapper{
    display:none;
}
.prize-container{
    position: absolute;
    top:19%;
    margin:0 12%;
    width:76%;
}
.prize-container .prize-content{
    position:absolute;
    top:40%;
    margin: 0 10%;
    width:80%;
}
.prize-container .prize-content .prize-infos{
    position:absolute;
    top:50%;
    width: 100%;
    text-align: center;
    font-size:15px;
    color:#787878;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
}